<template>
  <div class="mt-1">
    <van-form>
      <van-field
        v-model="seat"
        clearable
        ref="seat"
        @focus="focustwo"
        label="库位"
        placeholder="请扫描库位"
        :label-width="labelWidth"
      />
      <van-field
        v-model="code"
        clearable
        label="拍码"
        ref="code"
        @focus="focus"
        :label-width="labelWidth"
        placeholder="请扫描拍码"
      />
      <ag-grid-vue
        style="width: 100%; height: 60vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        rowSelection="single"
        :rowData="rowData"
      >
      </ag-grid-vue>
      <van-row type="flex" gutter="30" justify="center">
        <van-col span="9">
          <van-button type="danger" class="mt-1" block @click="onRemoveSelected"
            >删除</van-button
          ></van-col
        >
        <van-col span="9"
          ><van-button type="info" class="mt-1" @click="onSubmit" block
            >提交</van-button
          ></van-col
        >
      </van-row>
      <van-popup
        v-model="ShowStatue"
        position="bottom"
        style="height: 100%"
        class="bg-default"
      >
        <show-send-data :ShowDataB="ShowData" @get-val="Sure" />
      </van-popup>
    </van-form>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import { InformationSubmit, getDetail } from "../assets/api/post";
import { parseQRCode, toast, parseKuKwei } from "../untils/commion";
import ShowSendData from "../components/ShowSendDate.vue";
import { AgGrid } from "../minx/AgGrid";

export default {
  components: { AgGridVue, ShowSendData },
  mixins: [AgGrid],
  data() {
    return {
      labelWidth: "7em",
      titles: new Map().set(8, "商品上架"),
      ShowStatue: false,
      type: null,
      code: "",
      seat: "", //库位
      seatId: "", //库位ID
      fieldNames: {
        text: "name",
        value: "id",
      },
      columnDefs: [
        { headerName: "拍号", field: "uniqueid" },
        { headerName: "库位", field: "seat" },
      ],
      rowData: [],
      detailData: [],
      ShowData: {}, //展示的数据
    };
  },
  watch: {
    code(newValue) {
      if (this.seat) {
        if (newValue.length > 9) {
          let paresqrdata = parseQRCode(newValue);
          if (paresqrdata) {
            if (
              !this.rowData.find((it) => it.uniqueid == paresqrdata.palletNo)
            ) {
              //获取数据
              this.getDetailInfo(paresqrdata.palletNo);
              paresqrdata = "";
              this.code = "";
            } else {
              toast("拍码重复");
              this.code = "";
            }
          } else {
            toast("请检查信息是否完整");
            this.code = "";
          }
        }
      } else {
        toast("请扫描库位");
      }
      this.code = "";
    },
    seat(val) {
      let newKuWei = parseKuKwei(val);
      this.seatId = newKuWei.kuWeiId;
      this.seat = newKuWei.kuWei;
    },
  },
  methods: {
    // 获取焦点时触发的方法
    focustwo() {
      // 获取焦点时阻止键盘弹出
      this.$refs.seat.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.seat.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    // 获取焦点时触发的方法
    focus() {
      // 获取焦点时阻止键盘弹出
      this.$refs.code.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.code.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    setTitle() {
      let res = this.titles.get(this.type);
      this.$store.commit("SET_NAVIGATION", res);
    },
    onRemoveSelected() {
      let selectedData = this.gridApi.getSelectedRows();
      if (this.rowData[0] == null) {
        this.$toast("当前表格为空");
      } else {
        if (selectedData[0] == null) {
          this.$toast("请选择要删除的数据");
        } else {
          let selctIndex = this.gridApi.applyTransaction({
            remove: selectedData,
          });
          // 删除选中的数据
          this.rowData.splice(selctIndex.remove[0].childIndex, 1);
          this.detailData.splice(selctIndex.remove[0].childIndex, 1);
        }
      }
    },
    //获取后台信息
    async getDetailInfo(val) {
      let res = await getDetail(val);
      if (res.status == 200) {
        this.ShowData = JSON.parse(JSON.stringify(res.data[0]));
        if (this.ShowData) {
          this.ShowStatue = true;
          this.rowData.push({
            uniqueid: res.data[0].uniqueid,
            seat: this.seat,
          });
        }
      } else {
        toast(res.msg);
      }
      this.code = "";
    },
    //传回来把组件关闭
    Sure() {
      setTimeout(() => {
        this.ShowStatue = false;
      }, 100);
      this.$refs.code.focus();
    },
    //主列表数据
    getOther() {
      let _this = this;
      this.rowData.map((item) => {
        _this.detailData.push({
          UniqueId: item.uniqueid,
          StorehouseId: this.seatId,
          StorehouseName: item.seat,
        });
      });
    },
    async onSubmit() {
      if (this.rowData.length == 0) {
        this.$toast("当前表格为空");
        this.seatId = "";
      } else {
        if (this.seatId == "") {
          this.$toast("请采用二维码扫描库位");
          this.rowData = [];
          this.seatId = "";
          return;
        }
        let type = "StockUpdates";
        let submit = {
          ModifiedId: "",
          ModifiedName: "",
        };
        this.getOther();
        let res = await InformationSubmit(
          type,
          JSON.stringify(submit),
          JSON.stringify(this.detailData)
        );
        let newRes = JSON.parse(res.d.Content);
        if (newRes.state == "success") {
          this.rowData = [];
          this.detailData = [];
          if (this.rowData.length == 0) {
            toast(newRes.message);
          }
        } else {
          toast(newRes.message);
        }
      }
    },
    // 关闭enter键
    closeEnter() {
      document.onkeydown = function (e) {
        //捕捉回车事件
        var ev = typeof event != "undefined" ? window.event : e;
        if (ev.keyCode == 13 || event.which == 13) {
          return false;
        }
      };
    },
  },
  mounted() {
    this.$refs.seat.focus();
    this.type = parseInt(this.$route.params.type);
    this.setTitle();
    this.orderNum = this.$store.state.number;
    this.closeEnter();
  },
};
</script>

<style lang="less" scoped>
.ag-theme-alpine .ag-root-wrapper {
  border-left-width: 0;
  border-right-width: 0;
}
</style>
